<template>
	<view class="container">
		<view class="select-box flex f-align" @click="$refs.selectGzbh.open()">
			<view class="f-center grow">
				<text v-show="gzbh" class="font24 white bold">{{gzbh}}( {{address}} )</text>
				<text v-show="gzbh" class="icon-right zlicon font24 white ml20"></text>
			</view>
			<view class="right-box f-center">
				<text class="font24 white mr10">筛选</text>
				<image src="../static/img/sdasdasdasd.png" style="width: 18rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view style="width: 100%;height: 83rpx;"></view>
		<view v-if="isfetch">
			<view class="flex f-column" v-if="goodsList.length > 0">
				<view class="order-item flex f-column font24 gray777" v-for="(item, index) in goodsList" :key="index" @click="$api.toPage('./schoolQuDetail?orderNumber=' + item.orderNumber)">
					<text>订单编号：{{item.orderNumber}}</text>
					<text>存入时间：{{item.transactionTime}}</text>
					<text>　箱门号：{{item.xmbh}}</text>
					<text>　　数量：{{item.goodsNumber}}</text>
					<view class="status-font">{{item.orderState}}</view>
				</view>
				<uni-load-more ref="loadMore" :status="loadStatus"></uni-load-more>
			</view>
			<view class="flex f-column f-align" v-else>
				<text class="nohas-font">暂无订单</text>
			</view>
		</view>
		
		<!-- 右侧筛选 -->
		<select-gzbh ref="selectGzbh" @gzbhChange="gzbhChange" :isSchoolQu="false" :maskClickClose="false"></select-gzbh>
	</view>
</template>

<script>
	import loadMore from '@/components/uni-load-more/uni-load-more.vue'
	import selectGzbh from '@/components/selectGzbh.vue'
	export default {
		data() {
			return {
				page: 1,
				loadStatus: 'more',
				isfetch: false,
				goodsList: [],
				gzbh: '',
				address: ''
			}
		},
		components: {
			loadMore,
			selectGzbh
		},
		onLoad() {
			this.$refs.selectGzbh.open()
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadStatus = 'more'
			this.getGoodsList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.loadStatus != 'noMore') {
				this.loadStatus = 'loading'
				this.page += 1
				this.getGoodsList()
			}
		},
		methods: {
			gzbhChange(item) {
				this.gzbh = item.gzbh
				this.address = item.address
				this.page = 1
				this.loadStatus = 'more'
				this.getGoodsList()
			},
			getGoodsList() {
				this.$http.ajax({
					url: '/Order/selectByState',
					params: {
						page: this.page,
						limit: 10,
						gzbh: this.gzbh
					}
				}).then((res) => {
					this.isfetch = true
					if (res.code == 0) {
						if (res.data.length < 10) {
							this.loadStatus = 'noMore'
						}
						if (this.page > 1) {
							this.goodsList = this.goodsList.concat(res.data)
						} else {
							this.goodsList = res.data
						}
					} else {
						this.goodsList = []
						this.loadStatus = 'noMore'
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-box {
		width: 750rpx;
		height: 83rpx;
		background: #4082FD;
		position: fixed;
		top: 0;
		z-index: 99;
		
		.right-box {
			width: 185rpx;
			height: 36rpx;
			border-left: 1rpx solid #7FA2E5;
		}
	}
	
	.order-item {
		width: 750rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		position: relative;
		padding: 15rpx 32rpx;

		.status-font {
			position: absolute;
			right: 32rpx;
			top: 66rpx;
			z-index: 10;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #BB1E32;
		}
	}

	.container {
		padding: 0;
	}
</style>
